/**
 * 派车单管理检索模块
 * @author xiaoxujs
 */

import { Button, Form, FormProps, Input, Select, Space } from "antd";
import { FC, useState } from "react";
import { IPcdZyVehicleInfoSelectParamsForm } from "../../../../../type/paichedan";
import { plateColorArrSelect, pypeOfVehicleDispatch } from "../../../../../assets/data";
import { handleGetDictionaryItem } from "../../../../../assets/fun/DictionaryItem";

const SearchModule: FC<{
    handleSearchCallback: (params: IPcdZyVehicleInfoSelectParamsForm) => void;
}> = ({
    handleSearchCallback
}) => {


    type FieldType = {
        dispatchNum?: string;
        plateNumber?: string;
        driverName?: string;
        contactNumber?: string;
        dispatchType?: string;
    };

    const [form] = Form.useForm();

    const [plateColor, setPlateColor] = useState<string>()// 



    const onFinish: FormProps<FieldType>['onFinish'] =  (values) => {
        console.log('Success:', values);
        const params = {
            ...values,
            plateColor,
        }
        handleSearchCallback(params);
    };
    // 重置
    const handleReset = () => {
        setPlateColor(undefined)
        form.resetFields();
        handleSearchCallback({});
    }
    return <div style={{
        padding: '2rem 0'
    }}>
        <Form
            name="basic"
            labelCol={{ span: 2 }}
            wrapperCol={{ span: 22 }}
            onFinish={onFinish}
            autoComplete="off"
            layout='inline'
            form = {form}
        >
            <Form.Item<FieldType>
                name="dispatchNum"
            >
                <Input placeholder="请输入派车单号" style={{ width: '27.3rem' }} />
            </Form.Item>

            <Form.Item<FieldType>
                name="plateNumber"
            >
                <Space.Compact style={{ width: '27.3rem' }} >
                    <Select value={plateColor} onChange={(value) => setPlateColor(value)} style={{ width: '10rem' }} options={[...plateColorArrSelect]} />
                    <Input placeholder="请输入车牌号!" />
                </Space.Compact>
            </Form.Item>
            <Form.Item<FieldType>
                name="driverName"
            >
                <Input placeholder="请输入司机姓名" style={{ width: '27.3rem' }} />
            </Form.Item>
            <Form.Item<FieldType>
                name="contactNumber"
            >
                <Input placeholder="请输入联系电话" style={{ width: '27.3rem' }} />
            </Form.Item>
            <Form.Item<FieldType>
                name="dispatchType"
            >
                {/* <Input placeholder="请输入派车类型" style={{ width: '27.3rem' }} /> */}
                <Select placeholder='请选择派车类型' options={handleGetDictionaryItem(pypeOfVehicleDispatch)} style={{ width: '27.3rem' }} />

            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button style={{border: '.1rem solid #C8E3FF'}} color="primary" variant="filled" htmlType="submit" icon = {<span className="iconfont">&#xe605;</span>}>
                    查询
                </Button>

            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button  onClick={() => handleReset()}  icon = {<span className="iconfont">&#xe67d;</span>}>
                    重置
                </Button>

            </Form.Item>
        </Form>
    </div>
}

export default SearchModule;